import { useState, useEffect } from 'react';
import AdminLayout from '../../components/admin/AdminLayout';
import StatsCard from '../../components/admin/cards/StatsCard';
import LineChart from '../../components/admin/charts/LineChart';
import PieChart from '../../components/admin/charts/PieChart';
import ActivityCard from '../../components/admin/cards/ActivityCard';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
  faUsers, faChartLine, faHeartbeat, 
  faRunning, faUtensils, faWalking,
  faBell, faCheckCircle, faExclamationTriangle
} from '@fortawesome/free-solid-svg-icons';

export default function AdminDashboard() {
  // 模拟数据
  const statsCards = [
    { title: '注册用户', value: '1,248', icon: faUsers, color: 'blue', increase: 12, description: '较上月增长' },
    { title: '活跃用户', value: '968', icon: faChartLine, color: 'green', increase: 8, description: '较上月增长' },
    { title: '健康数据', value: '18,592', icon: faHeartbeat, color: 'purple', increase: 24, description: '本月记录数' },
    { title: '完成目标', value: '867', icon: faCheckCircle, color: 'pink', increase: -3, description: '较上月变化' },
  ];

  // 用户增长数据
  const userGrowthData = {
    labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    data: [120, 165, 210, 250, 290, 350, 410, 490, 560, 650, 720, 780],
  };

  // 健康数据分布
  const healthDataDistribution = {
    labels: ['体重记录', '步数记录', '心率记录', '睡眠记录', '饮水记录', '热量记录'],
    data: [3500, 6800, 2200, 1800, 2400, 1900],
  };

  // 健康目标完成率
  const healthGoalCompletion = {
    labels: ['已完成', '进行中', '已超时', '已放弃'],
    data: [62, 23, 10, 5],
    colors: [
      'rgba(16, 185, 129, 0.8)', // green
      'rgba(59, 130, 246, 0.8)', // blue
      'rgba(245, 158, 11, 0.8)', // amber
      'rgba(239, 68, 68, 0.8)'   // red
    ]
  };

  // 最近活动
  const recentActivities = [
    {
      type: 'user',
      icon: faUsers,
      title: '新用户注册',
      description: '用户"健康达人123"完成注册，开始健康之旅',
      user: '系统',
      time: '2023-11-05T10:30:00',
      status: 'completed'
    },
    {
      type: 'system',
      icon: faHeartbeat,
      title: '数据同步完成',
      description: '系统成功同步了284条用户健康数据',
      user: '系统',
      time: '2023-11-05T09:15:00',
      status: 'completed'
    },
    {
      type: 'user',
      icon: faRunning,
      title: '用户目标完成',
      description: '用户"跑步爱好者"完成了本月运动目标',
      user: '运动模块',
      time: '2023-11-04T18:45:00',
      status: 'completed'
    },
    {
      type: 'alert',
      icon: faExclamationTriangle,
      title: '系统警告',
      description: '服务器负载过高，已自动扩展资源',
      user: '系统监控',
      time: '2023-11-04T14:20:00',
      status: 'resolved'
    },
    {
      type: 'user',
      icon: faUtensils,
      title: '新增营养计划',
      description: '营养师添加了5个新的健康饮食计划',
      user: '内容管理',
      time: '2023-11-03T11:10:00',
      status: 'completed'
    },
  ];

  return (
    <AdminLayout>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900">仪表盘</h1>
        <p className="mt-1 text-sm text-gray-600">欢迎回来，管理员。这是您的健康平台概览。</p>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {statsCards.map((card, index) => (
          <StatsCard 
            key={index}
            title={card.title}
            value={card.value}
            icon={card.icon}
            color={card.color}
            increase={card.increase}
            description={card.description}
          />
        ))}
      </div>

      {/* 图表数据 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <LineChart 
          title="用户增长趋势"
          labels={userGrowthData.labels}
          data={userGrowthData.data}
          borderColor="rgba(59, 130, 246, 1)"
          backgroundColor="rgba(59, 130, 246, 0.1)"
        />
        <PieChart 
          title="健康数据分布"
          labels={healthDataDistribution.labels}
          data={healthDataDistribution.data}
          type="doughnut"
        />
      </div>

      {/* 详细数据和活动 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-1">
          <PieChart 
            title="健康目标完成率"
            labels={healthGoalCompletion.labels}
            data={healthGoalCompletion.data}
            colors={healthGoalCompletion.colors}
            type="pie"
          />
        </div>
        <div className="lg:col-span-2">
          <ActivityCard activities={recentActivities} />
        </div>
      </div>
    </AdminLayout>
  );
} 